<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>今日特惠</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link href="../../css/mui.picker.css" rel="stylesheet" />
		<link href="../../css/mui.poppicker.css" rel="stylesheet" />
		<style>
			html,body{
				min-height: 100%;
				background: #fff;
			}
			.mui-bar-nav{
				background: #fff;
				box-shadow: none;
				border-bottom: 1px solid #666;
			}
			.mui-bar-nav a{
				color: #666;
			}
			#title li{
				float: left;
				width: 20%;
				text-align: center;
			}
			#title .mui-table-view-cell{
				list-style: none!important;
				font-size: 15px;
				padding: 11px 0;
			}
			.mui-table-view .mui-media-object{
				max-width: 100px;
				height: 100px;
			}
			.mui-table-view-cell:after{
				height: 0;
			}
			.mui-table-view-cell>a:not(.mui-btn){
				padding: 0;
				margin: 0;
			}
			.mui-media{
				border-bottom: 1px solid #666;
			}
			.mui-media-body{
				height: 100px;
				display: flex;
				flex-direction: column;
				flex-wrap: nowrap;
				justify-content: space-between;
				align-items: flex-start;
			}
			.mui-poppicker{
				height: 200px;
				width: 100%;
				top: -100%;
				border-radius: 0;
				box-shadow: none;
				border-top: 0;
				-webkit-transform: translateY(0px);
				-webkit-transition: 0s;
			}
			.mui-poppicker *{
				box-shadow: none;				
			}
			.mui-poppicker.mui-active{
				top: 88px;
				-webkit-transform: translateY(0px);
				-webkit-transition: 0s;
			}
			.mui-poppicker.mui-active .mui-picker{
				background: #fff;				
			}
			.mui-poppicker-header{
				display: none;
			}
			.mui-popover.mui-active#key22,
			.mui-popover.mui-active#key33,
			.mui-popover.mui-active#key44,
			.mui-popover.mui-active#key55{
				width: 100%;
				left: 0!important;
				border-radius: 0;
			}
			#key22{
				height: 20px;
				top: 88px !important;
			}
			.mui-popover .mui-popover-arrow.mui-bottom:after{
				display: none;
			}
			#key33{
				height: 20px;
				top: 88px !important;
			}
			#key44 .mui-table-view{
				padding: 10px;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: space-around;
				align-items: center;
			}
						
			#key44{
				top: 88px !important;
				padding: 10px;
			}
			
			#key55{
				height: 500px;
				padding: 5px;
			}
			#key55 #inputGroup{
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;
			}
			#key55 #inputGroup *{
				padding: 0;
				margin: 0;
			}
			#key55 #inputGroup input{
				width: 40%;
				text-indent: 5px;
			}
			#key55 #inputGroup div{
				width: 30px;
				height: 1px;
				background: #000;
			}
			.mui-table-view{
				border-radius: 0!important;
			}
			#key55  .mui-table-view li{
				padding: 5px 15px;
			}
			.mui-progressbar span{
				background: green;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<div class="mui-row">
			 	<div class="mui-col-sm-1 mui-col-xs-1">
		            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		        </div>
		        
		        <div class="mui-col-sm-10 mui-col-xs-10">
		            <div class="mui-input-row mui-search">
						<input type="search" class="mui-input-clear" placeholder="">
					</div>
		        </div>
			</div>
		</header>
		<div class="mui-content">
			<div class="mui-row" id="title">
				<!--<div class="mui-col-sm-1 mui-col-xs-1"></div>-->
		 		<div class="mui-col-sm-12 mui-col-xs-12">
		            <li class="mui-table-view-cell">
		                <a class="key1" >位置<img src="../../images/sjx@3x.png" alt="" width="10" style="vertical-align: middle;margin-left: 5px"/></a>
		            </li>
		            <li class="mui-table-view-cell">
		               	<a class="key2" href="#key22">大小<img src="../../images/sjx@3x.png" alt="" width="10" style="vertical-align: middle;margin-left: 5px"/></a>
		            </li>		            
		            <li class="mui-table-view-cell">
		                <a class="key3" href="#key33">价格<img src="../../images/sjx@3x.png" alt="" width="10" style="vertical-align: middle;margin-left: 5px"/></a>
		            </li>		            
		            <li class="mui-table-view-cell">
		                <a class="key4" href="#key44">设备<img src="../../images/sjx@3x.png" alt="" width="10" style="vertical-align: middle;margin-left: 5px"/></a>
		            </li>
		            <li class="mui-table-view-cell">
						<a class="key5" href="#key55">类型<img src="../../images/sjx@3x.png" alt="" width="10" style="vertical-align: middle;margin-left: 5px"/></a>
		            </li>
		        </div>
		       
		    </div>
		    
			
		    <ul class="mui-table-view">
		        <li class="mui-table-view-cell mui-media">
		            <a href="javascript:;">
		                <img class="mui-media-object mui-pull-left" src="../../images/a1.jpg">
		                <div class="mui-media-body">
		                    <p class="mui-ellipsis">地铁1号线 高新园站100米呵呵呵呵呵呵</p>
		                    <p class="mui-ellipsis-4">
		                    	<span>68m</span><sup>2</sup>/
		                    	<span>单间</span>/
		                    	<span>押二付一</span>
		                   	</p>
		                    <p class="mui-ellipsis">¥500元/月</p>
		                    <p class="mui-ellipsis-4">
		                    	<span>离站台100米</span>
		                    	<span>离站台100米</span>
		                    	<span>离站台100米</span>
		                    </p>
		                </div>
		            </a>
		        </li>
		        <li class="mui-table-view-cell mui-media">
		            <a href="javascript:;">
		                <img class="mui-media-object mui-pull-left" src="../../images/a1.jpg">
		                <div class="mui-media-body">
		                    <p class="mui-ellipsis">地铁1号线 高新园站100米呵呵呵呵呵呵</p>
		                    <p class="mui-ellipsis-4">
		                    	<span>68m</span><sup>2</sup>/
		                    	<span>单间</span>/
		                    	<span>押二付一</span>
		                   	</p>
		                    <p class="mui-ellipsis">¥500元/月</p>
		                    <p class="mui-ellipsis-4">
		                    	<span>离站台100米</span>
		                    	<span>离站台100米</span>
		                    	<span>离站台100米</span>
		                    </p>
		                </div>
		            </a>
		        </li>
		    </ul>
		    
		    <div id="key22" class="mui-popover">
				<div class="mui-popover-arrow"></div>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<span>单间</span>
						<span>一房一厅</span>
						<span>两房</span>
						<span>三房</span>
					</li>
				</ul>
			</div>
			<div id="key33" class="mui-popover">
				<div class="mui-popover-arrow"></div>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell" style="text-align: center;">
						0元~不限	
					</li>
					<li class="mui-table-view-cell">
						<div id="demo1" class="mui-progressbar">
							<span></span>
						</div>
					</li>
				</ul>
			</div>
			<div id="key44" class="mui-popover">
				<div class="mui-popover-arrow"></div>
				<div class="mui-row" style="text-align: center;padding: 5px;">
				    <div class="mui-col-sm-6 mui-col-xs-6" >
				    	<span style="border: 1px solid green;padding: 5px;border-radius: 8px;">拎包入住</span>
				    </div>
				    <div class="mui-col-sm-6 mui-col-xs-6">家具自制</div>
				</div>
			</div>
			<div id="key55" class="mui-popover">
				<div class="mui-popover-arrow"></div>
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">房屋类型</li>
							<li class="mui-table-view-cell">
								<span>单间</span>
								<span>一房一厅</span>
								<span>二房二厅</span>
								<span>三房一厅</span>
							</li>
							<li class="mui-table-view-cell">价格范围</li>
							<li class="mui-table-view-cell" id="inputGroup">
								<input type="text" />
								<div class="line" style="height: 1px solid #000"></div>
								<input type="text" />
								<span> /元</span>
							</li>
							<li class="mui-table-view-cell">地理位置</li>
							<li class="mui-table-view-cell">
								<div class="mui-row" style="text-align: center;line-height: 40px;">
									<div class="mui-col-sm-2 mui-col-xs-2">
										地铁
									</div>
									<div class="mui-col-sm-4 mui-col-xs-4">
							            <input type="text" style="margin: 0;"/>
							        </div>
							        <div class="mui-col-sm-2 mui-col-xs-2">
										公交
									</div>
									<div class="mui-col-sm-4 mui-col-xs-4">
							            <input type="text" style="margin: 0;"/>
							        </div>
								</div>
								<div class="mui-row" style="text-align: center;line-height: 40px;">
							       <div class="mui-col-sm-2 mui-col-xs-2">
										公交
									</div>
									<div class="mui-col-sm-4 mui-col-xs-4">
							            <input type="text" style="margin: 0;"/>
							       </div>
								</div>					
							</li>
							<li class="mui-table-view-cell">房屋设备</li>
							<li class="mui-table-view-cell">
								<div class="mui-row" style="text-align: center;">
								    <div class="mui-col-sm-6 mui-col-xs-6">
								    	<span style="border: 1px solid green;padding: 5px;border-radius: 8px;">拎包入住</span>
								    </div>
								    <div class="mui-col-sm-6 mui-col-xs-6">
								    	<span style="border: 1px solid green;padding: 5px;border-radius: 8px;">家具自制</span>
								    </div>
								</div>
							</li>
							<li class="mui-table-view-cell">租房类型</li>
							<li class="mui-table-view-cell">
								<div class="mui-row" style="text-align: center;">
								    <div class="mui-col-sm-6 mui-col-xs-6">
								    	<span style="border: 1px solid green;padding: 5px;border-radius: 8px;">合租</span>
								    </div>
								    <div class="mui-col-sm-6 mui-col-xs-6">
								    	<span style="border: 1px solid green;padding: 5px;border-radius: 8px;">整租</span>
								    </div>
								</div>
							</li>
							
						</ul>							
				       				       						
							

					</div>
				</div>
			</div>
			    
		</div>
		
		
		
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/mui.picker.js"></script>
		<script src="../../js/mui.poppicker.js"></script>
		<script src="../../js/city.data-3.js"></script>
		<script src="../../js/jquery.min.js"></script>
		
		<script type="text/javascript">
			mui.init()
			mui.ready(function () {
				var key1 = document.getElementsByClassName('key1')[0];
				/*var key2 = document.getElementsByClassName('key2')[0];
				var key3 = document.getElementsByClassName('key3')[0];
				var key4 = document.getElementsByClassName('key4')[0];
				var key5 = document.getElementsByClassName('key5')[0];*/
				var cityPicker = new mui.PopPicker({
					layer: 2
				});
				cityPicker.setData(cityData3);
				key1.addEventListener('tap', function () {
					cityPicker.show();
				})
			})
			mui("#demo1").progressbar({progress:20}).show();
			/*$(function () {
				$('.title li').eq(0).click(function () {
						console.log(1)
				})
			})*/
		</script>
	</body>

</html>